import React, { useState, useEffect } from "react";
import { Grid } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import {
  Invitation,
  PlayCircle,
  UmbrellaCircle,
  Printer,
  FireO,
  AddSquare,
  BrowsingHistory,
  HomeO,
  HotelO,
  BookmarkO
} from "@react-vant/icons";

import { bannerQuery, newlist } from "./service/homeService";
import NewList from "./component/Home/NewList";
import Banner from "./component/Home/Banner";

export default function Home() {
  const navigate = useNavigate();
  let [bannerList, setBannerList] = useState([]);
  let [newList, setNewList] = useState([]); //新闻列表的
  useEffect(() => {
    (async () => {
      let { data } = await bannerQuery({ type: 2 });
      setBannerList(data.rows);
      let { data: datanewlist } = await newlist();
      // console.log(datanewlist.rows, "新闻列表的");
      setNewList([...datanewlist.rows]);
    })();
    // 获取新闻列表的
  }, []);

  const apps = [
    {
      path: "/post",
      name: "找房子",
      icon: <HomeO color="#FCD307" fontSize={32} />,
    },
    {
      path: "/house",
      name: "门诊预约",
      icon: <HotelO color="#F04C10" fontSize={32} />,
    },
    {
      path: "/dish",
      name: "厨房助手",
      icon: <UmbrellaCircle color="#7B7FE2" fontSize={32} />,
    },
    {
      path: "/Lifepay",
      name: "生活缴费",
      icon: <Invitation color="#B13BC9" fontSize={32} />,
    },
    {
      path: "/love",
      name: "爱心公益",
      // icon: <AppOutline fontSize={32} />
      icon: <Printer color="#5EFF00" fontSize={32} />,
    },
    {
      path: "/book",
      name: "图书馆",
      icon: <BookmarkO fontSize={32} color='var(--adm-color-primary)' />,
    },
    {
      path: "/job",
      name: "媒体服务",
      // icon: <AppOutline fontSize={32} />
      icon: <PlayCircle color="#F71D24" fontSize={32} />,
    },
    {
      path: "/book",
      name: "热点新闻",
      // icon: <AppOutline fontSize={32} />
      icon: <FireO color="#3f45ff" fontSize={32} />,
    },
    {
      path: "/job",
      name: "企查查",
      // icon: <AppOutline fontSize={32} />
      icon: <BrowsingHistory color="#3f45ff" fontSize={32} />,
    },
    {
      path: "/job",
      name: "新能源",
      // icon: <AppOutline fontSize={32} />
      icon: <AddSquare color="#66C492" fontSize={32} />,
    },
  ];
  return (
    <div>
      <Banner list={bannerList}></Banner>


      <Grid columns={5} gap={4} style={{ marginTop: "12px" }}>
        {apps.map((app, idx) => {
          return (
            <Grid.Item
              key={idx}
              onClick={() => {
                navigate(app.path);
              }}
            >
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  flexDirection: "column",
                }}
              >
                {app.icon}
                <span style={{ fontSize: "16px" }}>{app.name}</span>
              </div>
            </Grid.Item>
          );
        })}
      </Grid>
      <NewList newList={newList}></NewList>
    </div>
  );
}
